<template>
	<view class="allBox">
		<view class="titleBox" :style="{height:isBox?'100%':'0%'}">
			<view :style="{opacity:isBox?'1':'0'}">{{title}}</view>
		</view>
		<scroll-view scroll-x="true" :scroll-left="scrollLeft" scroll-with-animation="true">
			<view class="tabList">
				<view class="tabItem" v-for="(item,index) in config" @tap="tapItem(index)"
					:style="{color:mainIndex == index?'#fff':'#999'}">
					{{item.title}}
				</view>
				<view style="padding: 0 38rpx;height: 10rpx"></view>
				<view class="selectItem" :style="{backgroundColor:color,left:`${leftNum}px`,color:color}">
					{{config[mainIndex].title}}
				</view>
			</view>
		</scroll-view>
		<view class="maskbtn" @tap="openMask">
			<view class="icon" :style="{transform:isBox?'rotate(180deg)':'rotate(0deg)'}"></view>
		</view>
		<view class="maskbox" v-if="isMask" @touchmove.stop @tap="hide"
			:style="{backgroundColor:isBox?'rgba(0,0,0,0.5)':'rgba(0,0,0,0)'}">
			<view class="btnbox" :style="{top:isBox?'0':'-100%'}">
				<view class="btnList">
					<view class="btnItem" @tap="tapItem(index)" v-for="(item,index) in config"
						:style="{background:index == mainIndex?color:'#fff',color:index == mainIndex?'#fff':'#999'}">
						{{item.title}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "Ytabs",
		props: {
			config: {
				default: () => {
					return []
				},
				type: Object / Array
			},
			color: {
				default: '#0f7ffc',
				type: String
			},
			title: {
				default: '',
				type: String
			},
			tabsIndex: {
				default: 0,
				type: Number
			}
		},
		data() {
			return {
				scrollLeft: 0,
				leftNum: 0,
				mainIndex: 0,
				isMask: false,
				isBox: false,
			};
		},
		watch: {
			tabsIndex() {
				this.tapItem(this.tabsIndex)
			},
		},
		methods: {
			tapItem(index) {
				const query = uni.createSelectorQuery().in(this);
				query.selectAll('.tabItem').boundingClientRect(data => {
					let left = 0
					for (let i = 0; i < index; i++) {
						left += data[i].width
					}
					this.leftNum = left
					this.scrollLeft = left - 150
					this.hide()
					this.mainIndex = index
					this.$emit('update:tabsIndex', this.mainIndex)
				}).exec();
			},
			show() {
				this.isMask = true
				setTimeout(() => {
					this.isBox = true
				}, 50)
			},
			hide() {
				this.isBox = false
				setTimeout(() => {
					this.isMask = false
				}, 500)
			},
			openMask() {
				if (!this.isMask) {
					this.show()
				} else {
					this.hide()
				}

			},
		}

	}
</script>

<style lang="scss" scoped>
	
	.allBox {
		display: flex;
		padding: 0 30rpx;
		position: relative;

		.titleBox {
			transition: 0.1s;
			overflow: hidden;
			position: absolute;
			background-color: #fff;
			width: 100%;
			top: 0;
			left: 0;
			z-index: 3;
			display: flex;
			align-items: center;

			view {
				transition: 0.1s;
				display: flex;
				align-items: center;
				padding: 0 30rpx;
				color: 14px;
				color: #333;
			}

		}

		.tabList {
			display: flex;
			position: relative;
			align-items: center;
			// overflow-x: scroll;
			padding: 15rpx 0;

			.tabItem {
				border-radius: 8rpx;
				padding: 5rpx 15rpx;
				color: #999;
				font-size: 14px;
				z-index: 2;
				white-space: nowrap;
				transition: 0.2s;
			}

			.selectItem {
				transition: 0.2s;
				white-space: nowrap;
				position: absolute;
				left: 0;
				border-radius: 8rpx;
				padding: 5rpx 15rpx;
				font-size: 14px;
				z-index: 1;
				// color: #FFFFFF;
			}
		}

		.maskbtn {
			position: absolute;
			right: 0;
			z-index: 4;
			height: 100%;
			background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 10%);
			width: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.icon {
				transition: 0.2s;
				width: 0rpx;
				height: 0rpx;
				margin-bottom: 9rpx;
				border-bottom: 18rpx solid #999;
				border-left: 15rpx solid rgba(0, 0, 0, 0);
				border-right: 15rpx solid rgba(0, 0, 0, 0);

				&:active {
					opacity: 0.7;
				}
			}
		}

		.maskbox {
			width: 100%;
			position: absolute;
			overflow: hidden;
			top: 100%;
			left: 0;
			height: 1500rpx;
			background: rgba(0, 0, 0, 0.5);
			transform: 0.2s;
			display: flex;
			flex-direction: column;

			.btnbox {
				position: absolute;
				width: 100%;
				transition: 0.2s;

				.btnList {
					display: flex;
					padding: 30rpx;
					flex-wrap: wrap;
					background-color: #fff;

					.btnItem {
						margin: 5rpx 0;
						border-radius: 8rpx;
						padding: 5rpx 15rpx;
						color: #999;
						font-size: 14px;
						z-index: 2;
						white-space: nowrap;
						transition: 0.2s;
					}
				}


			}
		}
	}
</style>
